app/pages/parameters/education_timings/[id].vue

<template>
  <LayoutContainer>
    <UiLoadingPanel v-if="pending" />
    <div v-else>
      <h2>{{ $t('educationTiming') }}</h2>
      <UiForm
        ref="form"
        :model="EducationTiming"
        :entity="educationTiming"
        :submitActions="submitActions"
      >
        <UiInputNumber
          field="educationTiming"
          v-model="educationTiming.timing"
          :rules="rules()"
        />
      </UiForm>
      <v-btn class="mr-12" @click="quit">
        {{ $t('back') }}
      </v-btn>
    </div>
  </LayoutContainer>
</template>
<script setup lang="ts">
import {ref, computed, ComputedRef} from 'vue'
import { useEntityFetch } from '~/composables/data/useEntityFetch'
import EducationTiming from '~/models/Education/EducationTiming'
import {RouteLocationPathRaw, useRoute, useRouter} from 'vue-router'
import { useI18n } from 'vue-i18n'
import { AnyJson } from '~/types/data'
import { SUBMIT_TYPE } from '~/types/enum/enums'
import {Ref} from "@vue/reactivity";

const i18n = useI18n()
const { fetch } = useEntityFetch()
const route = useRoute()
const router = useRouter()

const educationTimingId: Ref<number> = ref(parseInt(route.params.id as string))

const goBackRoute: RouteLocationPathRaw = { path: `/parameters`, query: { tab: 'educationTimings' } }

const submitActions = computed(() => {
  let actions: AnyJson = {}
  actions[SUBMIT_TYPE.SAVE_AND_BACK] = goBackRoute
  return actions
})

const { data: educationTiming, pending } = fetch(
  EducationTiming,
  educationTimingId.value
)

const rules = () => [
  (timing: string | null) =>
    (timing !== null && timing.length > 0) || i18n.t('please_enter_a_value'),
]

const quit = () => {
  router.push(goBackRoute)
}

</script>